<template>
  <div class="wrapper">
    <!--              上下间隔200px                        透明度                                               圆角-->
    <div style="margin:200px auto; background-color:rgb(255,255,255,0.5);width:350px;height: 300px;padding:20px;border-radius:10px ">
      <div style="margin: 20px 0; text-align:center;font-size: 24px"><b>登 录</b></div>
      <el-form :rules="rules" :model="user" ref="userForm"><!--  el-from 校验用的,通过 rules 属性传入约定的验证规则,和prop 属性对应,
 prop属性要写在<el-from-item>内,  :model="user"输入账号密码时取消提示 -->

        <el-form-item prop="username">
          <el-input size="medium" style="margin: 10px 0;opacity: 0.5" prefix-icon="el-icon-user" v-model="user.username"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input size="medium" style="margin: 10px 0;opacity: 0.5" prefix-icon="el-icon-lock" show-password
                    v-model="user.password"></el-input>
          <!--                                       opacity 透明度                                输入密码时旁边的小眼睛,可以选择是否查看密码  -->
        </el-form-item>

        <el-form-item style="margin:10px 0;opacity: 0.6;text-align: right">
          <el-button type="success" size="small" autocomplete="off" @click="login">登录</el-button>
          <el-button type="warning" size="small" autocomplete="off" @click="$router.push('/register')">注册</el-button>
        </el-form-item>

      </el-form>

    </div>
  </div>
</template>
<!--登录框提示
1.新增  :rules="rules"  :model="user"  user是对象
2.添加规则变量
3.添加<el-form-item prop="username">-->
<script>
import {setRoutes} from "@/router";

export default {
  name: "Login",
  data() {
    return {
      user: {},
      rules: {//规则变量
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},//trigger: 'blur' 鼠标离开时提示
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},//trigger: 'blur' 鼠标离开时提示
          {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
        ],
      }
    }
  },
  methods: {

    login() {
      //前端主导进行密码校验
      //   this.$refs['userForm'].validate((valid) => {
      //     if (valid) {//表单校验合法
      //       this.request.post("/user/login",this.user).then(res =>{    //400表示前端和后端传的参数不一样
      //         if (!res){
      //           // alert('submit!');//弹窗
      //           this.$message.error("用户名或密码错误")
      //         }else {//成功就跳到/home所在的页面
      //           this.$router.push("/home")
      //         }
      //       })
      //     } else {
      //       console.log('error submit!!');
      //       return false;
      //     }
      //   });

      // 后端主导进行密码校验
      this.$refs['userForm'].validate((valid) => {
        if (valid) {//表单校验合法
          this.request.post("/user/login", this.user).then(res => {    //400表示前端和后端传的参数不一样
            if (res.code === '200') {
              localStorage.setItem("user", JSON.stringify(res.data))//将前端数据储存起来，储存用户信息到浏览器
              localStorage.setItem("menus", JSON.stringify(res.data.menus))//将登录时的侧边菜单数据储存到前端页面里，aside.vue里进行调用

              //动态设置当前用户的路由
              setRoutes()
              this.$router.push("/home")
              this.$message.success("登录成功")
            } else {//成功就跳到/home所在的页面
              this.$message.error(res.msg)
            }
          })
        }
      });
    },

    handleKeyPress(event) {//登录 使用回车键
      if (event.key === 'Enter') {
        this.$refs['userForm'].validate((valid) => {
          if (valid) {
            this.login();//通过回车键调用手动登录功能
          }
        });
      }
    }
  },
  mounted() {
    document.addEventListener('keypress', this.handleKeyPress);//按键事件监听器
  },
  beforeDestroy() {//beforeDestroy方法用于在组件销毁之前，即组件被移除前，移除之前添加的事件监听器。
    document.removeEventListener('keypress', this.handleKeyPress);
    //移除之前添加的按键事件监听器，以防止在组件被销毁时仍然保留对键盘事件的监听，避免潜在的内存泄漏和冗余监听。
  }
}
</script>

<style>
.wrapper {
  height: 100vh;
  /*background-image: linear-gradient(to bottom right, #cccccc, #fc4668, #3f5efb, #42b983, #333333);*/
  /*                                    渐变色*/
  background: url("@/assets/login.jpg");
  background-size: 100% 100%;
  overflow: hidden;
}
</style>